<template>
  <div class="medov-ball2-container" :style="{
    width: `${width}px`,
    height: `${height}px`,
  }">
    <div class="box-render" :style="{
      width: `${renderWidth}px`,
      height: `${renderHeight}px`,
      borderColor: renderColor,
      boxShadow: `0 0 15px 7px ${renderColor}`
    }">
      <ul class="ball fixed-center" :style="{
        width: `${ballWidth}px`,
        height: `${ballWidth}px`,
      }">
        <li class="li1"></li>
        <li class="li2"></li>
        <li class="li3"></li>
        <li class="li4"></li>
        <li class="li5"></li>
        <li class="li6"></li>
        <li class="li7"></li>
        <li class="li8"></li>
        <li class="li9"></li>
        <li class="li11"></li>
        <li class="li12"></li>
        <li class="li13"></li>
        <li class="li14"></li>
        <li class="li15"></li>
        <li class="li16"></li>
        <li class="li17"></li>
        <li class="li18"></li>
        <li class="li19"></li>
      </ul>
    </div>
    <div class="box2-render fixed-center" :style="{
      width: `${renderWidth}px`,
      height: `${renderHeight}px`,
      borderColor: renderColor,
      boxShadow: `0 0 15px 7px ${renderColor}`
    }">
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义 props
const props = defineProps({
  options: {
    type: Object,
    default: () => ({
      width: 300,
      height: 300,
      ballColor: '#4FC8FF',
      renderColor: '#1EDFF8'
    })
  }
});

// 响应式状态
const renderWidth = ref(400);
const renderHeight = ref(400);
const width = ref(300);
const height = ref(300);
const ballWidth = ref(350);
const ballHeight = ref(350);
const ballColor = ref('#4FC8FF');
const renderColor = ref('#1EDFF8');

// 监听 options 变化
watch(() => props.options, (val) => {
  if(val.width) {
    width.value = val.width;
    renderWidth.value = val.width;
    renderHeight.value = val.width;
    ballWidth.value = val.width * 0.85;
    ballHeight.value = val.width * 0.85;
  }
  if(val.height) {
    height.value = val.height;
  }
  if(val.ballColor) {
    ballColor.value = val.ballColor;
  }
  if(val.renderColor) {
    renderColor.value = val.renderColor;
  }
}, {
  deep: true,
  immediate: true
});
</script>

<style scoped lang="less">
.medov-ball2-container {
  ul,li{
    list-style:none;
  }
  ul {
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
  }
  /* 光晕 */
  .box-render {
    width:400px;
    height:400px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 0;
    border: 5px slide #1EDFF8;
    border-radius:100%;
    transform-style:preserve-3d;
    transform:rotateX(80deg) rotateY(-40deg);
    animation:gyRotate 40s linear infinite;
  }

  .box2-render {
    width:400px;
    height:400px;
    position: absolute;
    z-index: 1;
    border:5px slide #1EDFF8;
    border-radius:100%;
    transform-style:preserve-3d;
    transform:rotateX(280deg) rotateY(140deg);
    animation:gyRotate2 40s linear infinite;
  }

  /* 球体 */
  .ball{
    width:300px;
    height:300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:100%;
    transform-style:preserve-3d;
    animation:ballRotate 40s linear infinite;
  }
  .ball li{
    position: absolute;
    width:100%;
    height:100%;
    border:2px dashed #4FC8FF;
    border-radius:100%;
  }
  .ball .li1{
    transform:rotateX(20deg);
  }
  .ball .li2{
    transform:rotateX(40deg);
  }
  .ball .li3{
    transform:rotateX(60deg);
  }
  .ball .li4{
    transform:rotateX(80deg);
  }
  .ball .li5{
    transform:rotateX(100deg);
  }
  .ball .li6{
    transform:rotateX(120deg);
  }
  .ball .li7{
    transform:rotateX(140deg);
  }
  .ball .li8{
    transform:rotateX(160deg);
  }
  .ball .li9{
    transform:rotateX(180deg);
  }

  .ball .li11{
    transform:rotateY(20deg);
  }
  .ball .li12{
    transform:rotateY(40deg);
  }
  .ball .li13{
    transform:rotateY(60deg);
  }
  .ball .li14{
    transform:rotateY(80deg);
  }
  .ball .li15{
    transform:rotateY(100deg);
  }
  .ball .li16{
    transform:rotateY(120deg);
  }
  .ball .li17{
    transform:rotateY(140deg);
  }
  .ball .li18{
    transform:rotateY(160deg);
  }
  .ball .li19{
    transform:rotateY(180deg);
  }

  /* 球体转动的关键帧 */
  @keyframes ballRotate {
    0%{ transform:rotateX(0deg); }
    100%{ transform:rotateX(360deg); }
  }

  /* 光晕转动 */
  @keyframes gyRotate {
    0%{ transform:rotateX(80deg) rotateY(-42deg) rotateZ(0deg); }
    100%{ transform:rotateX(80deg) rotateY(-42deg) rotateZ(360deg); }
  }

  @keyframes gyRotate2 {
    0%{ transform:rotateX(280deg) rotateY(140deg) rotateZ(0deg); }
    100%{ transform:rotateX(280deg) rotateY(140deg) rotateZ(360deg); }
  }
}
</style>
